<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>维修保障设备</title>
		<link type="text/css" th:href="@{/css/style.css}" rel="stylesheet" />
		<link type="text/css" th:href="@{/css/animation.css}" rel="stylesheet" />
		<script type="text/javascript" th:src="@{/js/jquery.js}" ></script>
		<script type="text/javascript" th:src="@{/js/animation.js}"></script>
		<script type="text/javascript">
			$(function(){
				$(".interactive-rba li").each(function(index){
					$(this).click(function(){
						$(".interactive-rba li").removeClass("active");
						$(".interactive-rbba").hide();
						$(this).addClass("active");
						$(".interactive-rbba").eq(index).show();
					});
				});
				$(".nav-bottom-show").click(function(event){
					event.stopPropagation();//阻止冒泡事件
					$(this).hide();
					$(".nav-bottom-content").show(500);
				});
				$(document).click(function(){
			        $(".nav-bottom-content").hide(500);
			        $(".nav-bottom-show").show();
			    });
			});
		</script>
	</head>
	<body>
		<div class="logo-a"></div>
		<div class="head-top">
			<div class="head-top-l">9:41</div>
			<div class="head-top-r"><img th:src="@{/images/dc.png}" /></div>
		</div>
		<!--<div class="header-title">交互式培训系统</div>-->
		<div class="container">
			<div class="interactive-l">
			  <div class="interactive-la">
				<ul>
					<a href="interactive.html"><li class="active">大系统</li></a>
					<a href="subsystem.html"><li>分系统1</li></a>
					<a href="subsystem.html"><li>分系统2</li></a>
					<a href="subsystem.html"><li>分系统3</li></a>
					<a href="subsystem.html"><li>分系统4</li></a>
					<a href="subsystem.html"><li>分系统5</li></a>
					<a href="subsystem.html"><li>分系统6</li></a>
					<a href="subsystem.html"><li>分系统7</li></a>
				</ul>
			  </div>
			</div>
			<div class="interactive-r">
				<div class="interactive-ra">大系统</div>
				<div class="interactive-rb">
					<div class="interactive-rba">
						<ul>
							<li class="active">系统介绍</li>
							<li>操作规范</li>
							<li>工作原理</li>
						</ul>
					</div>
					<div class="interactive-rbb">
						<div class="interactive-rbba" style="display:block">
							<ul>
								<li onclick="location='recautions.html'"><span>型号名称</span></li>
								<li onclick="location='content.html'"><span>用户特点</span></li>
								<li onclick="location='content.html'"><span>系统功能</span></li>
								<li onclick="location='content.html'"><span>系统组成</span></li>
								<li onclick="location='content.html'"><span>系统部署</span></li>
								<li onclick="location='content.html'"><span>主要战技指标</span></li>
							</ul>
						</div>
						<div class="interactive-rbba">
							<ul>
								<li><span>安全注意事项</span></li>
								<li><span>设备使用条件</span></li>
								<li><span>设备使用注意事项</span></li>
							</ul>
						</div>
						<div class="interactive-rbba">
							<ul>
								<li><span>系统工作原理</span></li>
								<li><span>设备工作原理</span></li>
								<li><span>结构特征</span></li>
								<li><span>安装调整</span></li>
								<li><span>接口特性</span></li>
								<li><span>使用原理</span></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--导航栏隐藏-->
		<div class="nav-bottom-show"></div>
		<div class="nav-bottom-hide"></div>
		<div class="nav-bottom-content">
		    <ul>
		    	<a href="main.html">
		    	<li>
		    		<img th:src="@{/images/nav-bottom-01.png}" />
		    		<p>主页</p>
		    	</li>
		    	</a>
                <!--<a href="project.html">
		    	<li>
		    		<img src="images/nav-bottom-02.png" />
		    		<p>项目</p>
		    	</li>
		    	</a>-->
		    	<a href="applicability.html">
		    	<li>
		    		<img th:src="@{/images/nav-bottom-07.png}" />
		    		<p>适用性</p>
		    	</li>
		    	</a>
		    	<a href="multimedia.html">
		    	<li>
		    		<img th:src="@{/images/nav-bottom-05.png}" />
		    		<p>多媒体</p>
		    	</li>
		    	</a>
		    	<a href="userhelp.html">
		    	<li>
		    		<img th:src="@{/images/nav-bottom-04.png}" />
		    		<p>用户帮助系统</p>
		    	</li>
		    	</a>
		    	<a href="access.html">
		    	<li>
		    		<img th:src="@{/images/nav-bottom-03.png}" />
		    		<p>访问记录</p>
		    	</li>
		    	</a>
		    	<a href="log-management.html">
		    	<li>
		    		<img th:src="@{/images/nav-bottom-06.png}" />
		    		<p>日志管理</p>
		    	</li>
		    	</a>
		    </ul>
		</div>
	</body>
</html>
